<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>

            var CTP_WEB_FULLPATH ='../';

        </script>
        <link href='../css/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../css/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../css/skins/blue/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../css/groupbox.css' rel='stylesheet' type='text/css'/>
        <link href='../css/tabs.css' rel='stylesheet' type='text/css'/>
        <script type='text/javascript' src='../js/jquery/jquery.js'></script>
        <script type='text/javascript' src='../js/jqueryui/jquery-ui.js'></script>
        <script type='text/javascript' src='../js/ctp/public/jsextend.js'></script>
        <script type='text/javascript' src='../js/ctp/public/ctp.core.js'></script>
        <script type='text/javascript' src='../js/ctp/validator/ctp.validator-rules.js'></script>
        <script type='text/javascript' src='../js/ctp/validator/ctp.validator.js'></script>
        <script type='text/javascript' src='../js/ctp/borderlayout/ctp.ui.borderlayout.js'></script>
        <script type='text/javascript' src='../js/ctp/borderlayout/jquery.layout.js'></script>
        <script type='text/javascript' src='../js/ctp/panel/ctp.ui.panel.js'></script>
        <script type='text/javascript' src='../js/ctp/public/jquery.bgiframe.js'></script>
        <script type='text/javascript' src='../js/ctp/groupbox/ctp.ui.groupbox.js'></script>
        <script type='text/javascript' src='../js/ctp/tabs/ctp.ui.tabs.js'></script>
        <script type='text/javascript' kind='variant'>

            var panel2;
            var groupbox2;
            var tabs1;
            var groupbox1;
            
        </script>
        <script type='text/javascript' kind='event'>

			function cc(){
				var i=0;
				while(i<20){
					tabs1.addTab({
						title: '网讯' + i,
						url: 'http://80.34.174.1/main.asp?Iagree=yes'
					});
					i++;
				}
				
			}

        </script>
        <script type='text/javascript' kind='ui'>

            $(document).ready(function(){

                tabs1 = new ctp.ui.tabs({
                    id: 'tabs1',
                    height:'300px',
                    items: [
                        {
                            title: '标签1',
                            content: [
								'content_3'
                            ]
                        }
                        ,
                        {
                            title: '标签2',
                            content: [
								'content_4'
                            ]
                        }
                        ,
                        {
                            title: '标签3',
                            content: [
								'content_5'
                            ]
                        }
                    ],
                    operational: false
                });

                groupbox2 = new ctp.ui.groupbox({
                    id: 'groupbox2',
                    title: '效果展示区',
                    align: 'fill',
                    items: [
                        tabs1
                    ]
                });

                groupbox1 = new ctp.ui.groupbox({
                    id: 'groupbox1',
                    title: '功能测试区',
                    items: [
						'input1','input2','input3','input4','input5','input6',
						'input7','input8','input9'
                    ]
                });

                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'tabs实例',
                    width: '50%',
                    height: 'auto',
                    align: 'center',
                    collapsible: false,
                    items: [
                        groupbox2,
                        groupbox1
                    ],
                    renderTo: 'body'
                });

            });

        </script>
    </head>
    <body>

	<input id="input1" type="button" value="新增一个标签(网讯)" onclick="tabs1.addTab({title:'网讯',url:'http://80.34.174.1/main.asp?Iagree=yes'});"> 
	<input id="input2" type="button" value="新增一个标签(网易)" onclick="tabs1.addTab({title:'网易',url:'http://www.163.com'});"> 
	<input id="input3" type="button" value="删除第2个标签" onclick="tabs1.delTab(2);">
	<input id="input4" type="button" value="选择第二个标签" onclick="tabs1.selectTab(2);">
	<input id="input5" type="button" value="选择第二十个标签" onclick="tabs1.selectTab(20);">
	<input id="input6" type="button" value="获得标签名为’网讯‘的标签的位置" onclick="alert(tabs1.getTabPosByTitle('网讯'));">
	<input id="input7" type="button" value="删除所有标签" onclick="tabs1.delTabAll();">
	<input id="input8" type="button" value="新增20个标签页" onclick="cc();">
	<input id="input9" type="button" value="现有标签数" onclick="alert(tabs1.getTabSum())">
	
	
	<div id="content_3">搜狐</div>
	<div id="content_4">网易<br />网易<br />网易<br />网易<br />网易<br />网易<br />网易<br />网易<br /></div>
	<div id="content_5">影空</div>

    </body>
</html>
